<template lang="html">
  <div class="menu-change-panel">
      <input type="hidden" v-model="ruleForm.id" ref="hiddenInput">
      <add-menu
        :ruleForm="ruleForm"
        :options="options"
        @select="selectPanel"
        :model="ruleForm"
        ref="ruleForm"
        class="demo-ruleForm"
        :newValue="ruleForm.pid"
        >
        <el-form-item>
          <el-button @click="openAdd" type="primary">添加</el-button>
          <el-button  @click="updateMenu" type="warning">修改</el-button>
          <el-button @click="delMenu" type="danger" :disabled="_hasChildren()">删除</el-button>
        </el-form-item>
      </add-menu>

    <el-dialog title="添加菜单" :visible.sync="dialogFormVisible">
        <add-menu
        :ruleForm="newRuleForm"
        :options="options"
        @select="selectDialog"
        :model="newRuleForm"
        ref="newRuleForm"
        :newValue="newRuleForm.pid"
        ></add-menu>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelChange">取 消</el-button>
          <el-button type="primary" @click="addNewMenu('newRuleForm')">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  delMenu,
  addMenu,
  updateMenu
} from 'api/menu'

import {
  mapGetters,
  mapMutations,
  mapActions
} from 'vuex'

import {
  loadToken
} from 'common/js/cache'

import AddMenu from 'backendIndex/addMenu/addMenu'

export default {
  data() {
    return {
      newPanelValue: '',
      newDialogValue: '',
      dialogTableVisible: false,
      dialogFormVisible: false,
      foreverEmpty: '',
      ruleForm: {
        name: '',
        orderNum: '',
        pid: '',
        status: '1'
      },
      newRuleForm: {
        name: '',
        orderNum: '',
        pid: '',
        status: '1'
      }
    }
  },
  computed: {
    ...mapGetters([
      'menuDetails',
      'menusData',
      'selectValue',
      'menusHandleData',
      'menuPanelSelect',
      'menuDialogSelect'
    ]),
    options() {
      let optionsArr = []
      let firstOption = {}
      firstOption.label = '最上级菜单'
      firstOption.value = 0
      this.menusData.forEach((item) => {
        item.label = item.name
        item.value = item.id
        optionsArr.push(item)
      })
      optionsArr.unshift(firstOption)
      return optionsArr
    }
  },
  methods: {
    selectPanel(value) {
      this.$set(this.ruleForm, 'pid', value)
    },
    selectDialog(value) {
      this.newRuleForm = Object.assign({}, this.newRuleForm, {
        'pid': value
      })
    },
    updateMenu() {
      this._updateMenu()
    },
    _updateMenu() {
      updateMenu(this.ruleForm, loadToken()).then((res) => {
        if (res.result === 'OK') {
          let arr = []
          this.menusData.forEach((item) => {
            if (item.id === this.ruleForm.id) {
              let newObj = Object.assign({}, item, this.ruleForm)
              arr.push(newObj)
            } else {
              arr.push(item)
            }
          })
          this.setMenusData(arr)
          this.$message({
            type: 'success',
            message: '菜单修改成功'
          })
        }
      })
    },
    delMenu() {
      this._hasChildren()
      this.$confirm('此操作将永久删除本菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._delMenu()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    _hasChildren() {
      let filterMenu = this.menusData.filter(item => item.pid === this.ruleForm.id && item.id !== this.ruleForm.id)
      return filterMenu.length > 0
    },
    _delMenu() {
      delMenu(this.ruleForm.id, loadToken()).then((res) => {
        this.$message({
          type: 'success',
          showClose: true,
          message: '菜单删除成功'
        })
        let newMenuData = this.menusData.filter(item => item.id !== this.ruleForm.id)
        this.setMenusData(newMenuData)
        this.ruleForm = {
          name: '',
          orderNum: '',
          pid: '',
          status: '1'
        }
      })
    },
    addNewMenu() {
      let name = this.newRuleForm.name
      let orderNum = this.newRuleForm.orderNum
      let status = this.newRuleForm.status
      let pid = this.newRuleForm.pid
      addMenu(name, pid, orderNum, status, loadToken()).then((res) => {
        if (res.result === 'OK') {
          this.dialogFormVisible = false
          this.$message({
            type: 'success',
            showClose: true,
            message: '菜单添加成功'
          })
          this.menusData.push(res.item)
          this.setMenusData(this.menusData)
        }
      })
    },
    openAdd() {
      this.newRuleForm.status = '1'
      this.newRuleForm.name = ''
      this.newRuleForm.orderNum = ''
      this.newRuleForm.pid = ''
      this.dialogFormVisible = true
    },
    cancelChange() {
      this.dialogFormVisible = false
    },
    ...mapMutations({
      setSelectValue: 'SET_SELECT_VALUE',
      setHandleData: 'SET_MENUS_HANDLE_DATA',
      setMenuPanelSelect: 'SET_MENU_PANEL_SELECT',
      setMenuDialogSelect: 'SET_MENU_DIALOG_SELECT'
    }),
    ...mapActions([
      'setMenusData',
      'setMenusHandleData'
    ])
  },
  watch: {
    menuDetails(newVal) {
      let obj = {}
      let {
        id,
        name,
        level,
        orderNum,
        pid,
        status
      } = newVal
      obj.id = id
      obj.name = name
      obj.level = level
      obj.orderNum = orderNum
      obj.pid = pid
      obj.status = status
      this.ruleForm = obj
    }
  },
  components: {
    AddMenu
  }
}
</script>
